<template>
  <div class="back">
    <div class="record">
      <span class="time">{{time.min<10?'0'+time.min:time.min}} : {{time.sec<10?'0'+time.sec:time.sec}}</span>
      <span class="round">第{{numberRounds}}轮</span>
    </div>
    <div class="cards"
         id="cards">
      <span class="cardsNum">{{animatedCardNumber}}</span>
    </div>
    <div class="Self oneSelf">
      <transition-group tag="div"
                        name="hand"
                        class="hand-cards"
                        id="handCard">
        <div class="hand-card"
             v-for="(item,index) in Leg[0].hands"
             @click="cardClick(index,item)"
             :key="item.id"
             :id="item.activation+'1'"
             :style="{'transform':'translate('+item.left+'px,'+(item.activation?-10:0)+'px)',
          'backgroundImage':'url('+(item.imageUrl)+')'}">
          <b class="points"
             :style="item.points==10? {'left':'13px'}:{},item.poker%2==0?{'color':'#000'}:{'color':'red'}">{{item.points}}</b>
          <i :class="'poker poker'+item.poker"
             :style="item.poker==2?{'left':'16px'}:{}"></i>
        </div>
      </transition-group>
      <div class="state current-round"
           :style="whoRounds===0?{'box-shadow': '0 16px 32px 0 rgba(0, 255, 0, 1)'}:{}">
        <div class="hand">
          <span class="hand-be">{{this.Leg[0].handsLength|integer}}</span>
          <span class="hand-xie">/</span>
          <span class="hand-ceiling">{{Leg[0].SHP}}</span>
        </div>
        <div class="con-left">
          <ul class="HP">
            <li v-for="index in Leg[0].HP">
              <img :src="index>Leg[0].HP-Leg[0].SHP?require('./HP-green.png'):require('./HP-grey.png')" />
            </li>
          </ul>
        </div>
        <div class="identity">
          <a>
            <img src="./identity.png" />
          </a>
        </div>
        <div class="equipment">
          <div :class="index"
               v-for="(item,index) in Leg[0].equipment">
            <div class="ca"
                 :class="item.poker==undefined?'caAction':''">
              <i :class="'poker'+(item.poker==undefined?'':' poker'+item.poker)"></i>
              <b class="points"
                 :style="item.poker%2==0?{'color':'#000'}:{'color':'red'}">{{item.points}}</b>
              <span v-text="item!={}?item.name:{}"></span>
            </div>
          </div>
        </div>
        <span class="seat">{{Leg[0].id|number_capital}}</span>
      </div>
      <transition name="slide-fade">
        <bar :bar="post.bar"
             :Leg="Leg"
             :show="post.show"
             :recording="recording"
             :playCard="playCard"
             v-if="Leg[0].stage==3||Leg[0].stage==4||Leg[0].stage==6||Leg[0].stage==8||Leg[0].stage==10"
             @endRound1="Leg[0].endRound"
             @del="briDetele"
             @add="handAdd"></bar>
      </transition>
    </div>
    <div class="Self twoSelf"
         :id="whoRounds"
         :style="[Leg[0].aims==1?{'box-shadow': '0 16px 32px 0 rgba(255, 145, 0, 1)'}:{},whoRounds===1?{'box-shadow': '0 16px 32px 0 rgba(0, 255, 0, 1)'}:{}]"
         @click="Leg[0].aims==1?Leg[0].aims=0:Leg[0].aims=1">
      <div class="state current-round">
        <div class="con-left">
          <ul class="HP">
            <li v-for="index in Leg[1].HP">
              <img :src="index>Leg[1].HP-Leg[1].SHP?require('./HP-green.png'):require('./HP-grey.png')" />
            </li>
          </ul>
          <i class="hand-length">
            <span>{{this.Leg[1].handsLength|integer}}</span>
          </i>
        </div>
        <div class="identity">
          <a>
            <img src="./identity.png" />
          </a>
        </div>
        <div class="equipment">
          <div :class="index"
               v-for="(item,index) in Leg[1].equipment">
            <div class="ca"
                 :class="item.poker==undefined?'caAction':''">
              <i :class="item.poker==undefined?'poker':'poker poker'+item.poker"
                 :style="item.poker==2?{'left':'16px'}:{}"></i>
              <b class="points"
                 :style="item.poker%2==0?{'color':'#000'}:{'color':'red'}">{{item.points}}</b>
              <span v-text="item!={}?item.name:{}"></span>
            </div>
          </div>
        </div>
        <bar :bar="post.bar"
             :Leg="Leg"
             :show="post.show"
             :palyCard="playCard"
             :recording="recording"
             v-if="Leg[1].stage==3||Leg[1].stage==4||Leg[1].stage==6||Leg[1].stage==7||Leg[1].stage==10"></bar>
        <span class="seat">{{Leg[1].id|number_capital}}</span>
      </div>
    </div>
    <div class="Self threeSelf"
         :id="whoRounds"
         :style="[Leg[0].aims==2?{'box-shadow': '0 16px 32px 0 rgba(255, 145, 0, 1)'}:{},whoRounds===2?{'box-shadow': '0 16px 32px 0 rgba(0, 255, 0, 1)'}:{}]"
         @click="Leg[0].aims=Leg[0].aims==2?0:2">
      <div class="state current-round">
        <div class="con-left">
          <ul class="HP">
            <li v-for="index in Leg[2].HP">
              <img :src="index>Leg[2].HP-Leg[2].SHP?require('./HP-green.png'):require('./HP-grey.png')" />
            </li>
          </ul>
          <i class="hand-length">
            <span>{{this.Leg[2].handsLength|integer}}</span>
          </i>
        </div>
        <div class="identity">
          <a>
            <img src="./identity.png" />
          </a>
        </div>
        <div class="equipment">
          <div :class="index"
               v-for="(item,index) in Leg[2].equipment">
            <div class="ca"
                 :class="item.poker==undefined?'caAction':''">
              <i :class="item.poker==undefined?'poker':'poker poker'+item.poker"
                 :style="item.poker==2?{'left':'16px'}:{}"></i>
              <b class="points"
                 :style="item.poker%2==0?{'color':'#000'}:{'color':'red'}">{{item.points}}</b>
              <span v-text="item!={}?item.name:{}"></span>
            </div>
          </div>
        </div>
        <bar :bar="post.bar"
             :Leg="Leg"
             :show="post.show"
             :recording="recording"
             :palyCard="playCard"
             v-if="Leg[2].stage==3||Leg[2].stage==4||Leg[2].stage==6||Leg[2].stage==7||Leg[2].stage==10"></bar>
        <span class="seat">{{Leg[2].id|number_capital}}</span>
      </div>
    </div>
    <transition-group name="pile"
                      class="pile"
                      tag="div"
                      id="pileCard">
      <div class="pile-card"
           v-for="(item,index) in pileCard"
           :id="item.id"
           :key="item.id"
           :style="{'backgroundImage':'url('+(item.imageUrl)+')','transform':'translate('+item.left+'px,0px)'}">
        <b class="points"
           :style="item.points==10?{'left':'13px'}:{},item.poker%2==0?{'color':'#000'}:{'color':'red'}">{{item.points}}</b>
        <i :class="'poker poker'+item.poker"></i>
        <div class="direction">
          <p class="pileUser">{{item.user|id_general}}</p>
          <span class="pileOperating">{{item.operating}}</span>
          <p class="pileAims">{{item.aims|id_general}}</p>
        </div>
      </div>
    </transition-group>
    <showCard :Leg="Leg"
              :show="post.show"
              v-if="post.show.bol"
              @gh="briDetele"
              @ss="handAdd">
    </showCard>
    <barGrain :showGrain="post.showGrain"
              :cardsList="cardsList"
              :Leg="Leg"
              :recording="recording"
              v-if="post.showGrain.bol"></barGrain>
  </div>
</template>
<script>
import { setTimeout } from "timers";
import { resolve } from "url";
import { connect } from "net";
import bar from "@/components/demo/progress-bar.vue";
import showCard from "@/components/demo/show-bar.vue";
import barGrain from "@/components/demo/allGrain-bar.vue";
import { addHandCardsObject, listOf, roundOf, resetRound, deleteArray, clone } from "@/assets/js/cardsEvent.js";
import { log } from "util";
import { Promise } from "q";
let that
export default {
  components: {
    bar,
    showCard,
    barGrain
  },
  data () {
    return {
      post: {
        bar: {
          // 谁的回合
          id: -1,
          //  那个阶段
          stage: -1,
          //  选中那张牌
          cardsLeg: -1,
          //  确定button是否高亮
          use: false,
          //  进度
          operatingSchedule: 100,
          //  阶段文本说明
          text: "",
          //  是否隐藏button
          condition: true
        },
        show: {
          name: "",
          userId: 0,
          aimsId: 0,
          bol: false
        },
        showGrain: {
          name: "五谷丰登",
          whoUse: -1,
          bol: false
        }
      },
      //  j堆
      discardPile: [],
      //  打出的牌
      pileCard: [],
      //  记录
      recording: {},
      //  用来查询的全部卡牌数据
      searchCards: [],
      //  牌堆
      cardsList: [],
      cardLength: 0,
      //  游戏时间
      time: {
        min: 0,
        sec: 0
      },
      //  游戏回合
      numberRounds: 0,
      //  哪一位的回合
      whoRounds: -1,
      Leg: [
        {
          //  座位号
          id: 0,
          //  目标
          aims: 0,
          //  当前阶段
          stage: 0,
          //  出杀的次数
          killNum: 0,
          //  当前回合出杀了没
          killBol: false,
          //  武将牌
          general: "刘备",
          //  身份
          identity: "主公",
          //  血量上限
          HP: 4,
          //  当前血量
          SHP: 2,
          //  手上有什么牌
          hands: [],
          //  手牌显示数量
          handsLength: 0,
          //  装备栏
          equipment: {
            //    武器
            weapons: {},
            //    防具
            armor: {},
            //    加1马
            defenseHorse: {},
            //    减1马
            pursuitHorse: {}
          },
          //    判定状态
          judgment: {
            NoHome: {
              name: "乐不思蜀",
              have: false
            },
            lightning: {
              name: "闪电",
              have: false
            }
          },
          /**
           * @Author: 刘克森
           * @LastEditors: 刘克森
           * @LastEditTime: Do not edit
           * @Description:  回合开始阶段
           * @Date: 2019-07-07 13:16:30
           */
          roundBegan: () => {
            resetRound.call(this, this.Leg[0]);
            roundOf.call(this, 0, this.Leg[0]);
            this.whoRounds = 0;
            this.Leg[0].killNum = 1;
            listOf.call(this, this.Leg[0]);
            //  判定阶段
            return this.Leg[0].determinePhase();
          },
          /**
           * @Author: 刘克森
           * @LastEditors: 刘克森
           * @LastEditTime: Do not edit
           * @Description: 判定阶段
           * @Date: 2019-07-07 13:48:25
           */
          determinePhase: () => {
            roundOf.call(this, 1, this.Leg[0]);
            //  摸牌阶段
            return this.Leg[0].touchCard();
            console.log("一位判定阶段");
          },
          /**
           * @Author: 刘克森
           * @LastEditors: 刘克森
           * @LastEditTime: Do not edit
           * @Description: 摸牌阶段
           * @Date: 2019-07-10 14:32:28
           */
          touchCard: () => {
            console.log('*');
            roundOf.call(this, 2, this.Leg[0]);
            this.post.bar.stage = this.Leg[0].stage;
            setTimeout(() => {
              this.cards(2, this.Leg[0]);
              //  出牌阶段
              return this.Leg[0].playingCard();
            }, 600);
          },
          /**
           * @Author: 刘克森
           * @LastEditors: 刘克森
           * @LastEditTime: Do not edit
           * @Description: 出牌阶段
           * @Date: 2019-07-12 13:49:28
           */
          playingCard: () => {
            roundOf.call(this, 3, this.Leg[0]);
          },
          /**
           * @Author: 刘克森
           * @LastEditors: 刘克森
           * @LastEditTime: Do not edit
           * @Description: 弃牌阶段
           * @Date: 2019-07-18 20:57:15
           */
          endRound: select => {
            this.endCard(select, this.Leg[0]);
          },
          /**
           * @Author: liukesen
           * @LastEditors: liukesen
           * @LastEditTime: Do not edit
           * @Description: 结束回合
           * @Date: 2019-07-29 21:03:29
           */
          endA: () => {
            this.Leg[1].roundBegan();
            roundOf.call(this, -1, this.Leg[0]);
          }
        },
        {
          id: 1,
          aims: -1,
          stage: -1,
          killNum: 0,
          killBol: false,
          general: "曹操",
          identity: "反贼",
          HP: 4,
          SHP: 4,
          hands: [],
          handsLength: 0,
          equipment: {
            weapons: {},
            armor: {},
            defenseHorse: {},
            pursuitHorse: {}
          },
          judgment: {
            NoHome: {
              name: "乐不思蜀",
              have: false
            },
            lightning: {
              name: "闪电",
              have: false
            }
          },
          roundBegan: () => {
            resetRound.call(this, this.Leg[1]);
            roundOf.call(this, 0, this.Leg[1]);
            listOf.call(this, this.Leg[1]);
            this.whoRounds = 1;
            this.Leg[1].killNum = 1;
            listOf.call(this, this.Leg[1]);
            //  判定阶段
            return this.Leg[1].determinePhase();
          },
          determinePhase: () => {
            roundOf.call(this, 1, this.Leg[1]);
            console.log("二位判定阶段");
            return this.Leg[1].touchCard();
          },
          touchCard: () => {
            roundOf.call(this, 2, this.Leg[1]);
            setTimeout(() => {
              this.cards(2, this.Leg[1]);
              //  出牌阶段
              return this.Leg[1].playingCard();
            }, 1000);

          },
          playingCard: () => {
            this.post.bar.text = "出牌";
            roundOf.call(this, 3, this.Leg[1]);
            if (this.Leg[1].killNum > 0) {
              setTimeout(() => {
                for (let i = 0; i < this.Leg[1].hands.length; i++) {
                  let element = this.Leg[1].hands[i];
                  if (element.name == "杀") {
                    element = this.searchCard(element.id);
                    this.post.bar.bol = "闪";
                    this.Leg[1].killNum--;
                    this.Leg[1].aims = element.aims = 0;
                    element.operating = "对";
                    this.pileTop(element, this.Leg[1], 2000);
                    this.Leg[1].hands.splice(i, 1);
                    roundOf.call(this, -1, this.Leg[1]);
                    this.post.bar.text = "成为【杀】的目标，请使用一张【闪】";
                    roundOf.call(this, 8, this.Leg[0]);
                    break;
                  }
                  if (i === this.Leg[1].hands.length - 1) this.Leg[1].endRound();
                }
              }, 1000);
            } else {
              this.Leg[1].endRound();
            }
          },
          endRound: () => {
            this.post.bar.text = "弃牌";
            setTimeout(() => {
              this.endCard(true, this.Leg[1]);
              console.log(this.Leg[1].stage);
              roundOf.call(this, -1, this.Leg[1]);
              this.Leg[2].roundBegan();
            }, 1000);
          }

        }, {
          id: 2,
          aims: -1,
          stage: -1,
          killNum: 0,
          killBol: false,
          general: "孙权",
          identity: "反贼",
          HP: 4,
          SHP: 4,
          hands: [],
          handsLength: 0,
          equipment: {
            weapons: {},
            armor: {},
            defenseHorse: {},
            pursuitHorse: {}
          },
          judgment: {
            NoHome: {
              name: "乐不思蜀",
              have: false
            },
            lightning: {
              name: "闪电",
              have: false
            }
          },
          roundBegan: () => {
            resetRound.call(this, this.Leg[2]);
            roundOf.call(this, 0, this.Leg[2]);
            listOf.call(this, this.Leg[2]);
            this.whoRounds = 2;
            this.Leg[2].killNum = 1;
            listOf.call(this, this.Leg[2]);
            //  判定阶段
            return this.Leg[2].determinePhase();
          },
          determinePhase: () => {
            roundOf.call(this, 1, this.Leg[2]);
            console.log("二位判定阶段");
            return this.Leg[2].touchCard();
          },
          touchCard: () => {
            roundOf.call(this, 2, this.Leg[2]);
            setTimeout(() => {
              this.cards(2, this.Leg[2]);
              //  出牌阶段
              return this.Leg[2].playingCard();
            }, 1000);

          },
          playingCard: () => {
            this.post.bar.text = "出牌";
            roundOf.call(this, 3, this.Leg[2]);
            if (this.Leg[2].killNum > 0) {
              setTimeout(() => {
                for (let i = 0; i < this.Leg[2].hands.length; i++) {
                  let element = this.Leg[2].hands[i];
                  if (element.name == "杀") {
                    element = this.searchCard(element.id);
                    this.post.bar.bol = "闪";
                    this.Leg[2].killNum--;
                    this.Leg[2].aims = element.aims = 0;
                    element.operating = "对";
                    this.pileTop(element, this.Leg[2], 2000);
                    this.Leg[2].hands.splice(i, 1);
                    roundOf.call(this, -1, this.Leg[2]);
                    this.post.bar.text = "成为【杀】的目标，请使用一张【闪】";
                    roundOf.call(this, 8, this.Leg[0]);
                    break;
                  }
                  if (i === this.Leg[2].hands.length - 1) this.Leg[2].endRound();
                }
              }, 1000);
            } else {
              this.Leg[2].endRound();
            }
          },
          endRound: () => {
            this.post.bar.text = "弃牌";
            setTimeout(() => {
              this.endCard(true, this.Leg[2]);
              roundOf.call(this, -1, this.Leg[2]);
              this.Leg[0].roundBegan(this.numberRounds++);
            }, 1000);
          }

        }]
      //  我的回合

    };
  },
  beforeCreate () {
    that = this;
  },
  created () {
    //取json里面的卡牌数据
    let ary = new Array();
    this.$ajax.get("../../../static/data.json").then(res => {
      res.data.cards.forEach(item => {
        item.forEach(value => {
          ary.push(value);
          // 这里由于是用于查询所以就没有写响应的
          this.searchCards.push(value);
        });
      });
      this.$set(this, 'cardsList', ary);
    });
  },
  mounted () {
    setTimeout(() => {
      this.stateRounds();
    }, 1000);
    // 开场计时器
    // let time = setInterval(() => {
    //   let minutes = this.time.min,
    //     seconds = this.time.sec;
    //   if (seconds++ > 60) {
    //     seconds = 0;
    //     minutes += 1;
    //   }
    //   this.time.min = minutes;
    //   this.time.sec = seconds;
    //   // console.log(seconds);
    // }, 1000);
  },
  methods: {
    /**
     * @Author: 刘克森
     * @LastEditors: 刘克森
     * @LastEditTime: Do not edit
     * @Description: 游戏开始
     * @Date: 2019-07-12 21:48:04
     */
    stateRounds: function () {

      this.shuffle(this.cardsList);
      //  开局4张牌
      this.cards(4, this.Leg[0]);
      this.cards(4, this.Leg[1]);
      // this.cards(4, this.Leg[2]);
      //  测试
      this.palyTest(this.Leg[0], 100);
      this.palyTest(this.Leg[0], 101);
      this.palyTest(this.Leg[1], 40);
      this.Leg[1].equipment.armor = this.searchCard(102);
      //  回合开始
      this.numberRounds = 1;
      this.Leg[0].roundBegan(this.numberRounds);
      // this.Leg[1].roundBegan(this.numberRounds);
    },
    /**
     * @Author: 刘克森
     * @LastEditors: 刘克森
     * @LastEditTime: Do not edit
     * @Description: 洗牌
     * @Date: 2019-07-15 12:07:09
     * cardsList 要进行打乱的数组
     */
    shuffle: function (cardsList) {
      let cards = cardsList;
      cards.forEach((element, index) => {
        let i = parseInt(Math.random() * (cards.length - 1));
        cardsList[index] = cardsList[i];
        cardsList[i] = element;
      });
      cardsList = cards;
      return cardsList;
    },
    /**
     * @Author: 刘克森
     * @LastEditors: 刘克森
     * @LastEditTime: Do not edit
     * @Description: "牌堆 函数"
     * @Date: 2019-07-04 13:13:07
     * num: 拿走牌堆多少张牌   who: 谁拿
     */
    cards (num, who) {
      let ob = {
        cards: [],
        addData: {},
        id: who
      }
      let res = this.cardsList;
      if (res.length > num) {
        ob.cards = res.splice(0, num);
      } else {
        this.cardsList = this.shuffle(this.discardPile);
        this.discardPile = [];
        ob.cards = res.splice(0, num);
      }
      ob.cards.forEach((element, index) => {
        ob.addData = new addHandCardsObject(element.name, who);
        ob.user = who.id;
        element.event = ob.addData.Event;
        element.imageUrl = require("./card-back.png");
        this.CardsAnimation(ob, element);
        // seat[who].hands.push(element);
      });
    },
    /**
     * @Author: 刘克森
     * @LastEditors: 刘克森
     * @LastEditTime: Do not edit
     * @Description:  选中那张牌`   
     * @Date: 2019-07-07 12:24:37
     */
    cardClick (index, card) {
      if (!card.activation) {
        let use = true;
        switch (this.Leg[0].stage) {
          case 3:
            for (let i = 0; i < this.Leg[0].hands.length; i++) {
              const element = this.Leg[0].hands[i];
              this.$set(element, 'activation', false);
            }
            this.$set(card, 'activation', true);
            this.post.bar.cardsLeg = index;
            switch (card.name) {
              case "无懈可击":
                this.post.bar.cardsLeg = -1;
                use = false;
                break;
              case "闪":
                this.post.bar.cardsLeg = -1;
                use = false;
                break;
              case "杀":
                if (this.Leg[0].killNum === 0) {
                  this.post.bar.cardsLeg = -1;
                  use = false;
                }
                this.post.operating = "选择一名角色，作为杀"
                break;
              case "桃":
                if (this.Leg[0].HP === this.Leg[0].SHP) {
                  this.post.bar.cardsLeg = -1;
                  use = false;
                }
                break;
              default:
                use = true;
                break;
            }
            this.post.bar.use = use;
            break;
          case 4:
            let activaNumList = new Array();
            for (let i = 0; i < this.Leg[0].hands.length; i++) {
              const element = this.Leg[0].hands[i];
              if (element.activation) {
                activaNumList.push(i);
              }
            }
            if (activaNumList.length === this.Leg[0].hands.length - this.Leg[0].SHP) {
              this.$set(this.Leg[0].hands[activaNumList[1]], 'activation', false);
            }
            if (activaNumList.length === this.Leg[0].hands.length - this.Leg[0].SHP - 1) {
              this.post.bar.use = true;
            }
            this.$set(card, 'activation', true);
            break;
          case 8:
          case 10:
            if (card.name === this.post.bar.bol) {
              for (let i = 0; i < this.Leg[0].hands.length; i++) {
                const element = this.Leg[0].hands[i];
                element.activation = false;
              }
              this.$set(card, 'activation', true)
              this.post.bar.cardsLeg = index;
              this.post.bar.use = true;
              use = false;
            } else {
              this.post.bar.cardsLeg = -1;
              use = false;
            }
            break;
          default:
            break;
        }
      } else if (card.activation) {
        this.Leg[0].aims = -1;
        this.post.bar.cardsLeg = -1;
        this.post.bar.use = false;
        this.$set(card, 'activation', false);
      }
    },
    /**
     * @Author: 刘克森
     * @LastEditors: 刘克森
     * @LastEditTime: Do not edit
     * @Description:  查询卡牌数据
     * @Date: 2019-07-07 20:06:03
     * id 通过id查询
     */
    searchCard (id) {
      for (let i = 0; i < this.searchCards.length; i++) {
        const element = this.searchCards[i];
        if (element.id == id) {
          let a = new addHandCardsObject(element.name);
          element.imageUrl = a.imageUrl;
          element.event = a.Event;
          // element.user = this.Leg[0].general;
          return element;
        }
      }
    },
    /**
     * @Author: 刘克森
     * @LastEditors: 刘克森
     * @LastEditTime: Do not edit
     * @Description:  卡牌进场动画
     * @Date: 2019-07-11 16:40:00
     * 摸牌
    */
    CardsAnimation (obj, value) {
      value.user = obj.id.id;
      if (obj.id.stage != 4) {
        value.operating = "摸牌";
        let index = this.pileCard.push(value);
        if (obj.id.id == 0) {
          value.imageUrl = obj.addData.imageUrl;
        }
        this.cardsLeftAdjustment(this.pileCard, 154, 1333);
        setTimeout(() => {
          this.pileCard.forEach((element, index) => {
            if (element.id == value.id) {
              this.pileCard.splice(index, 1);
            }
          });
          obj.id.hands.push(value);
        }, 300);
      }
    },
    /**
     * @Author: 刘克森
     * @LastEditors: 刘克森
     * @LastEditTime: Do not edit
     * @Description: 当 整个手牌区域放不下手牌进行处理
     * @Date: 2019-07-11 19:40:39
     * obj: 哪的牌   width:每张牌的宽度   zWidth:这块区域的容纳宽度
     */
    cardsLeftAdjustment (obj, width, zWidth) {
      //单个卡牌的长度
      //手牌总长度
      for (let i = 0; i < obj.length; i++) {
        if (width * obj.length > zWidth) {
          let widthLeft = width * obj.length - zWidth;
          this.$set(obj[i], 'left', (width - widthLeft / obj.length) * i)
        } else {
          this.$set(obj[i], 'left', width * i);
        }
      }
    },
    /**
     * @Author: liukesen
     * @LastEditors: liukesen
     * @LastEditTime: Do not edit
     * @Description: 出牌
     * i:卡片坐标  who:谁使用  operating:怎么使用
     * @Date: 2019-07-29 20:56:21
     */
    playCard (i, who, operating) {
      let card = who.hands[i];
      card.operating = operating == undefined ? "" : operating
      let equipment = who.equipment;
      let index = 0;
      this.post.bar.condition = true;
      this.post.show.userId = who.id;
      card.user = who.id;
      if (this.post.bar.stage !== 8 && this.post.bar.stage !== 10) {
        this.post.bar.user = who.id;
        who.hands.splice(i, 1);
        if (!5 > card.category > 0) card.event.call(this, who, card)
        this.post.bar.use = false;
        this.post.bar.operatingSchedule = 100;
        switch (card.category) {
          case 1:
            if (who.killBol) {
              if (card.name !== "诸葛连弩") {
                who.killNum = 0;
              }
            }
            setTimeout(() => {
              if (equipment.weapons.id !== undefined) {
                equipment.weapons.operating = '弃置';
                equipment.weapons.aims = -1;
                this.pileTop(equipment.weapons, who, 700);
              }
              equipment.weapons = card;
            }, 700);
            break;
          case 2:
            setTimeout(() => {
              if (equipment.armor.id != undefined) {
                equipment.armor.operating = '弃置';
                equipment.armor.aims = -1;
                this.pileTop(equipment.armor, who, 700);
              }
              equipment.armor = card;
            }, 700);
            break;
          case 3:
            setTimeout(() => {
              if (equipment.defenseHorse.id != undefined) {
                equipment.defenseHorse.operating = '弃置';
                equipment.defenseHorse.aims = -1;
                this.pileTop(equipment.defenseHorse, who, 700);
              }
              equipment.defenseHorse = card;
            }, 700);
            break;
          case 4:
            setTimeout(() => {
              if (equipment.pursuitHorse.id != undefined) {
                equipment.pursuitHorse.operating = '弃置';
                equipment.pursuitHorse.aims = -1;
                this.pileTop(equipment.pursuitHorse, who, 700);
              }
              equipment.pursuitHorse = card;
            }, 700);
            break;
          default:
            index++;
            break;
        }
        console.log(card);
        this.pileTop(card, who, 700);
      }
    },
    /**
     * @Author: liukesen
     * @LastEditors: liukesen
     * @LastEditTime: Do not edit
     * @Description: 弃牌
     * @Date: 2019-07-29 20:57:15
     */
    endCard (select, who) {
      let endCardList = who.hands;
      let cardFold = endCardList.length - who.SHP;
      let newHands = endCardList.filter(element => {
        return (!element.activation)
      })
      let delHands = endCardList.filter(element => {
        return (element.activation)
      })
      if (cardFold < 0) {
        cardFold = 0;
      }
      if (select && cardFold > 0) {
        roundOf.call(this, 4, who);
        if (delHands.length < cardFold) {
          for (let i = 0; i < cardFold; i++) {
            let obj = endCardList.splice(0, 1);
            if (who.id == 1) {
              obj[0] = this.searchCard(obj[0].id);
            }
            obj[0].operating = "弃牌";
            this.pileTop(obj[0], who, 1000);
          }
        } else {
          this.$set(who, 'hands', newHands);
          delHands.forEach(element => {
            if (who.id == 1) {
              element = this.searchCard(element.id);
            }
            element.operating = "弃牌";
            this.pileTop(element, who, 1000);
          });
        }
        if (who.id === 0) {
          this.Leg[0].endA();
          // this.cardsLeftAdjustment(this.Leg[0], 150);
        }
      } else if (!select && cardFold > 0 && who.id === 0) {
        this.post.bar.text = "弃牌阶段，选" + cardFold + "张手牌，点确定弃置";
        roundOf.call(this, 4, who);
      } else {
        roundOf.call(this, 5, who);
        if (who.id === 0) {
          who.endA();
        }
      }
    },
    /**
     * @Description: 操作卡牌之后暂存显示操作细节
     * @Author: liukesen
     * @LastEditTime: Do not edit
     * @LastEditors: liukesen
     * @Date: 2019-07-25 20:36:48
     * cards: 卡片列表  who: 谁  time: 消失时间
     */
    pileTop (cards, who, time) {
      this.pileCard.push(cards);
      this.cardsLeftAdjustment(this.pileCard, 154, 770);
      setTimeout(() => {
        if (this.pileCard !== []) {
          this.pileCard.forEach((element, index) => {
            this.pileCard.splice(index, 1);
            this.discardPile.push(element);
          });
        }
      }, time);
    },
    /**
     * @Author: liukesen
     * @LastEditors: liukesen
     * @LastEditTime: Do not edit
     * @Description: 过河拆桥使用
     * @Date: 2019-08-22 17:36:14
     */
    briDetele (val, whoUse, aims, index) {
      this.post.show.bol = false;
      switch (val.category) {
        case 1:
          aims.equipment.weapons = {};
          break;
        case 2:
          aims.equipment.armor = {};
          break;
        case 3:
          aims.equipment.defenseHorse = {};
          break;
        case 4:
          aims.equipment.pursuitHorse = {};
          break;
        case 5:
          if (val.name == "乐不思蜀") {
            aims.NoHome.have == false;
          } else {
            aims.lightning.have == false;
          }
        default:
          aims.hands.splice(index, 1);
          break;
      }
      this.pileTop(this.searchCard(val.id), aims, 1500);
      roundOf.call(this, 3, whoUse);
    },
    /**
     * @Author: liukesen
     * @LastEditors: liukesen
     * @LastEditTime: Do not edit
     * @Description: 顺手牵羊使用
     * @Date: 2019-08-22 17:36:14
     */
    handAdd (val, whoUse, aims, index) {
      this.post.show.bol = false;
      switch (val.category) {
        case 1:
          aims.equipment.weapons = {};
          break;
        case 2:
          aims.equipment.armor = {};
          break;
        case 3:
          aims.equipment.defenseHorse = {};
          break;
        case 4:
          aims.equipment.pursuitHorse = {};
          break;
        case 5:
          if (val.name == "乐不思蜀") {
            aims.NoHome.have == false;
          } else {
            aims.lightning.have == false;
          }
        default:
          aims.hands.splice(index, 1);
          break;
      }
      whoUse.hands.push(this.searchCard(val.id));
      roundOf.call(this, 3, whoUse);
    },
    /**
     * @Author: liukesen
     * @LastEditors: liukesen
     * @LastEditTime: Do not edit
     * @Description: 出杀后被杀一方执行，不打出特定卡牌或者没有装备、技能.扣血
     * @Date: 2019-09-26 19:08:53
     */
    dodge: function (who, card, aims, killDodgeBol) {
      let bol = this.post.bar.bol = "闪";
      if (!killDodgeBol) bol = this.post.bar.bol = "杀";
      // 待续
      this.post.bar.operating = 100;
      let [whoStage, _bar] = [who.stage, JSON.parse(JSON.stringify(this.post.bar))];
      let _stage = aims === 0 ? 8 : 7;
      roundOf.call(this, -1, who)
      roundOf.call(this, _stage, this.Leg[aims]);
      this.post.bar.text = bol;
      _bar.use = false;
      let aimsHands = this.Leg[aims].hands;
      let dodgeLegIndex = -1;
      for (let i = 0; i < aimsHands.length; i++) {
        const element = aimsHands[i];
        if (element.name === bol) {
          dodgeLegIndex = i;
          break;
        }
      }
      setTimeout(() => {
        if (aims != 0) {
          if (dodgeLegIndex !== -1) {
            element = this.searchCard(element.id);
            this.playCard(dodgeLegIndex, this.Leg[aims], "打出");
          } else {
            this.Leg[aims].SHP -= 1;
          }
          roundOf.call(this, -1, this.Leg[aims]);
          roundOf.call(this, whoStage, who);
          this.post.bar = _bar;
          return dodgeLegIndex;
        } else {
          roundOf.call(this, -1, who);
          roundOf.call(this, 3, this.Leg[aims]);
        }
      }, 1500);
    },
    /**
     * @Author: liukesen
     * @LastEditors: liukesen
     * @LastEditTime: Do not edit
     * @Description: 测试
     * @Date: 2019-09-16 13:41:12
     */
    palyTest: function (who, id) {
      //  给几件装备
      who.hands.push(this.searchCard(id));
    }
  },
  computed: {
    animatedCardNumber: function () {
      return this.cardLength.toFixed(0);
    },
    mHandsLegRound: function () {
      return this.Leg[0].stage;
    },
    myHandsLeg: function () {
      return this.Leg[0].hands;
    },
    twHandsLeg: function () {
      return this.Leg[1].hands;
    },
    thHandsLeg: function () {
      return this.Leg[2].hands;
    },
    mShp: function () {
      return this.Leg[0].SHP;
    },
    playLegBar: function () {
      return this.post.bar.id;
    },

    /**
     * @Author: liukesen
     * @LastEditors: liukesen
     * @Date: 2020-02-08 19:12:00
     * @LastEditTime: Do not edit
     * @Description: 座位2的血量
     */
    leg2Hp: function () {
      return this.Leg[1].SHP;
    }
  },
  watch: {
    mShp: function (newValue, oldValue) {
      if (newValue < oldValue && oldValue !== undefined) {
        document.getElementsByClassName("state")[0].className += " shake";
        setTimeout(() => {
          let shaKeRegE = document.getElementsByClassName("state")[0].className;
          let className = shaKeRegE.replace(/\sshake/i, "");
          document.getElementsByClassName("state")[0].className = className;
        }, 1100)
      }
    },
    playLegBar: function (newValue) {
      this.post.bar.condition = newValue === 0;
    },
    cardsList: function (newValue) {
      new TweenMax.to(this.$data, 0.7, {
        cardLength: newValue.length
      });
    },
    mHandsLegRound: function (newValue) {
      this.Leg[0].hands.forEach(element => {
        this.$set(element, 'activation', false);
      });
      this.post.bar.operatingSchedule = 100;
      switch (newValue) {
        case 3:
          console.log(this.post.bar.use);
          this.post.bar.text = "出牌阶段，请选择一张卡牌";
          this.post.bar.condition = true;
          break;
        case 4:
          break;
        default:
      }
    },
    myHandsLeg: function (newValue, oldVal) {
      this.cardsLeftAdjustment(newValue, 150, 1333);
      new TweenMax.to(this.Leg[0], 0.1, {
        handsLength: newValue.length
      });
    },
    twHandsLeg: function (newValue, oldVal) {
      new TweenMax.to(this.Leg[1], 0.1, {
        handsLength: newValue.length
      });
    },
    thHandsLeg: function (newValue, oldVal) {
      new TweenMax.to(this.Leg[2], 0.1, {
        handsLength: newValue.length
      });
    },
    pileCard: function (newValue) {
      this.cardsLeftAdjustment(newValue, 154, 770);
    },
    leg2Hp: function (newValue, oldValue) {
      if (newValue === 0) {
        alert("快吃桃不然你就没了");
        let who = this.Leg[1].hands;
        for (let i = 0; i < who.length; i++) {
          let element = who[i];
          if (element.name === "桃") {
            element = this.searchCard(element.id);
            this.playCard(i, this.Leg[1], "打出");
            this.Leg[1].SHP += 1;
            break
          }
        }
      } else {
        if (newValue < oldValue && oldValue !== undefined) {
          document.getElementsByClassName("state")[1].className += " shake";
          setTimeout(() => {
            let shaKeRegE = document.getElementsByClassName("state")[1].className;
            let className = shaKeRegE.replace(/\sshake/i, "");
            document.getElementsByClassName("state")[1].className = className;
          }, 1100)
        }
      }

    }
  },
  filters: {
    number_capital: function (element) {
      const val = element + 1;
      if (val === 1) return '一'
      else if (val === 2) return '二'
      else if (val === 3) return '三'
      else if (val === 4) return '四'
      else if (val === 5) return '五'
      else if (val === 6) return '六'
      else if (val === 7) return '七'
      else if (val === 8) return '八'
    },
    id_general: function (val) {
      if (val >= 0) {
        return that.Leg[val].general
      } else {
        return ""
      }
    },
    integer: function (val) {
      return val.toFixed(0);
    }
  }
};
</script>
<style scope>
@import url("../../assets/css/game.css");
@import url("transition.css");
</style>
